<template>
  <div class="wrapper">
    <div class="input-box">
      <span class="fl">充值金额：</span>
      <input class="fl" :value="payAmount" type="number" disabled="disabled">
      <span class="fr color-gray">明细</span>
    </div>
    <ul class="list">
      <li v-for="(item,index) in dataList"
          :key="index"
          :class="{active:item.active}" @click="changeTab(item)">
        <div class="flex">
          <div class="item" v-if="item.payCount == 0">
            <p class="text3">其他金额</p>
          </div>
          <div class="item" v-else>
            <p class="text1">{{item.payCount}}</p>
            <p class="text2">{{item.payDesc}}</p>
            <img v-if="item.isOdds == 1" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/label1.png" class="odds">
          </div>
        </div>
      </li>
    </ul>
    <div class="fix-btn">
      <button class="btn pass" @click="toOrder()">立即充值</button>
    </div>
    <div class="dialog" v-if="showDialog">
      <div class="dialog_main" style="height: 444rpx">
        <img class="close" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/close2.png" @click="showDialog = false">
        <div class="dialog_ipt">
          <input v-model="amount" type="number" maxlength="4" placeholder="输入金额" @input="input" focus>
        </div>
        <div class="dialog_footer foot" style="padding-top: 68rpx">
          <button class="leftbtn" style="width: 590rpx" @click="addOtherAmount">确定</button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import Service from '@/utils/service'
  import { showToast } from "@/utils/index";

  export default {

    data() {
      return {
        dataList: [],
        showDialog: false,
        amount: '',
        payAmount: '',
        disable: false
      }
    },

    onUnload() {
//      Object.assign(this.$data, this.$options.data())
    },
    onLoad(options) {
      this.getDataList()
    },

    methods: {
      goCoinCard() {
        wx.navigateTo({
          url: `../coinCard/main`
        })
      },
      addOtherAmount() {
        if (this.amount) {
          let data = {
            amount: this.amount
          }
          Service.addOtherAmount(data).then((res) => {
            if (res.code == 200) {
              let list = this.dataList
              this.dataList.forEach((item,index) => {
                if (index == (list.length - 1)) {
                  item.payCount = res.data.amount
                  item.payDesc = res.data.gift
                }
              })
              this.payAmount = res.data.amount
              this.showDialog = false
            }
          })
        }
      },
      input(e) {
        if (e.target.value == '0') {
          this.amount = ''
        }
      },
      toOrder(item) {
        if (!this.payAmount) {
          showToast('请选择您要购买的金额');
          return
        }
        wx.navigateTo({
          url: '../coinRechargeOrder/main?payAmount=' + this.payAmount
        })
      },
      changeTab(item) {
        let _this = this
        this.dataList.forEach((i) => {
          i.active = false
          if (i.isOther) {
            i.payCount = 0
            _this.amount = ''
          }
        })
        item.active = true
        if (item.isOther) {
          this.showDialog = true
        }
        this.payAmount = item.payCount
      },
      getDataList() {
        Service.getMCoin()
          .then((res) => {
            if (res.code == 200) {
              if (res.data.miCoinRule) {
                let list = res.data.miCoinRule
                list.forEach((item,index) => {
                  if (index == 0) {
                    item.active = true
                    this.payAmount = item.payCount
                  } else {
                    item.active = false
                  }
                  if (index == (list.length - 1)) {
                    item.isOther = true
                  }
                })
                this.dataList = list
              }
            }
          })
      }
    }
  }
</script>

<style scoped>
  .color-gray {
    color: #666;
  }
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  .wrapper {
    padding: 30px 30px;
    background: #fff;
    overflow: auto;
  }
  .input-box {
    display: block;
    width: 690px;
    height: 50px;
    line-height: 50px;
    color: rgba(51,51,51,1);
  }
  .input-box input {
    height: 50px;
    border: 2px solid #999;
    padding-left: 20px;
  }
  .label{
    padding-bottom: 30px;
    font-size:28px;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:40px;
  }
  .list{
    display: block;
    width: 680px;
    margin-top: 30px;
    margin: 0 auto;
    overflow: auto;
  }
  .list li{
    display: block;
    position: relative;
    float: left;
    margin: 20px 20px;
    width: 180px;
    height:120px;
    border: 2px solid #999;
  }
  .flex{
    display: flex;
    width:180px;
    height:120px;
    align-items: center;
    text-align: center;
  }
  .fix-btn {
    margin: 100px 0 20px;
    margin-top: 100px;
    width: 100%;
  }
  .item{
    width: 100%;
  }
  .odds{
    position: absolute;
    top: -6px;
    left:0;
    width: 110px;
    height: 30px;
  }
  p{
    width: 100%;
  }
  .text1{
    padding-bottom: 4px;
    font-size:32px;
    color:rgba(51,51,51,1);
    line-height:45px;
  }
  .text2{
    font-size:24px;
    color:rgba(51,51,51,1);
    line-height:33px;
  }
  .text3{
    font-size:26px;
    color:rgba(51,51,51,1);
    line-height:37px;
  }
  .text4{
    font-size:32px;
    color:rgba(51,51,51,1);
    line-height:45px;
  }
  .list li.active{
    background:#FED130;
  }
  .list li.active p{
  }
  .footer{
    position: fixed;
    left:0;
    right: 0;
    bottom:0;
    height:160px;
    line-height: 160px;
    background:rgba(255,255,255,1);
    box-shadow:0px -2px 30px 0px rgba(0,0,0,0.1);
  }
  .footer .price{
    padding-left: 50px;
    font-size: 30px;
  }
  .footer .num{
    font-size: 60px;
  }
  .recharge{
    position: absolute;
    top: 30px;
    right: 50px;
    width:270px;
    height:100px;
    line-height: 100px;
    background:rgba(254,209,48,1);
    border-radius:8px;
    font-size:30px;
    font-weight:400;
    color:rgba(51,51,51,1);
    text-align: center;
  }
  .tips{
    position: fixed;
    left: 0;
    bottom:195px;
    width: 100%;
    font-size:24px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:33px;
    text-align: center;
  }
  .tips:before,.tips:after{
    content: '';
    position: absolute;
    top: 17px;
    display: block;
    width:70px;
    height:2px;
    background: #ddd;
  }
  .tips:before{
    left: 50px;
  }
  .tips:after{
    right: 50px;
  }
  .dialog_title{
    position: absolute;
    top:36px;
    left: 0;
    width: 100%;
    font-size:34px;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:48px;
    text-align: center;
  }
  .close{
    position: absolute;
    top: 30px;
    right: 30px;
    width: 58px;
    height: 58px;
    z-index: 10;
  }
  .dialog_ipt{
    padding-top: 40px;
  }
  .dialog_ipt input{
    width: cacl(100vw - 20rpx);
    font-size:30px;
    font-weight:400;
    color:#333;
    height: 80px;
    line-height: 80px;
    border: 2px solid #999;
    text-align: left;
    border-radius:8px;
    padding-left: 20px;
  }
</style>
